
<template>
  <view class="content">
    <view class="title">欢迎登录数据世界</view>
    <uni-forms ref="form" :modelValue="formData" :rules="rules">
      <uni-forms-item name="yhdm">
        <uni-easyinput style="margin-top:48rpx" prefixIcon="person" v-model="formData.yhdm" placeholder="请输入用户名">
        </uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="yhmm">
        <uni-easyinput style="margin-top:36rpx" type="password" prefixIcon="locked" v-model="formData.yhmm"
          placeholder="请输入密码">
        </uni-easyinput>
      </uni-forms-item>
      <button @tap="login" style="margin-top:120rpx" type="primary">登录</button>
<!--      <button @tap="register" style="margin-top:40rpx" >账号注册</button>-->
    </uni-forms>
  </view>
</template>

<script setup lang="ts">
import LoginModelImp from "../model/LoginModelImp";
import { reactive, ref } from "vue";
import UserLogin from "../bean/UserLogin";
const form = ref()
const rules = {
  yhdm: {
    rules: [{
      required: true,
      errorMessage: '请输入账号',
    }
    ]
  },
  yhmm: {
    rules: [{
      required: true,
      errorMessage: '请输入密码',
    },
    {
      minLength: 6,
      errorMessage: '密码长度最少需要{minLength}个字符',
    }
    ]
  }
}
const formData = reactive({
  yhdm: "",
  yhmm: "",
  model: "details",
})

const login = () => {
  form.value.validate().then(() => {
    const loginModelImp = new LoginModelImp();
    return loginModelImp.UserLogin(formData).then((userLogin: UserLogin) => {
    }).catch((err) => {
      console.log(err)
    })
  }).catch((err: any) => {
    console.log('表单错误信息：', err);
  })
}
const register = () => {
  uni.navigateTo({ url: `/pages/register/view/index` })

}
</script>

<style lang="scss" scoped>
.content {
  width: calc(100% - 80rpx);
  padding: 100rpx 40rpx;

  .title {
    font-size: 56rpx;
  }

  .bottom {
    background-color: #ffffff;
    width: calc(100% - 80rpx);
    font-size: 28rpx;
    text-align: center;
    position: fixed;
    padding: 20rpx;
    bottom: 0rpx;

    text {
      color: $uni-color-primary;
    }
  }
}
</style>
